<template>
  <div class="table-box">
    <ProTable :columns="columns" :request-api="list" :init-param="initParams" ref="proRef">
      <template #tableHeader>
        <el-button type="primary" @click="opera(undefined)" v-auth="'创建资源'">创建资源</el-button>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link @click="opera(row)" v-auth="'编辑资源'">编辑</el-button>
        <el-button type="primary" link @click="deleteRow([row.id])" v-auth="'删除资源'">删除</el-button>
      </template>
    </ProTable>
    <ApiDrawer ref="apiRef"></ApiDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { list, add, edit, deleteApi } from "@/api/modules/api";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import ApiDrawer from "../components/apiDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";

const apiRef = ref<InstanceType<typeof ApiDrawer> | null>();

const proRef = ref<InstanceType<typeof ProTable> | null>();

const route = useRoute();

const initParams = reactive({ pageSize: 1, pageNum: 10, id: route.query.id });

const columns: ColumnProps[] = [
  { type: "selection" },
  { prop: "api_name", label: "资源名称" },
  { prop: "api_path", label: "路径" },
  { prop: "api_type", label: "类型" },
  { prop: "opera", label: "操作" }
];

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { api_name: "", api_path: "", api_type: "", route_id: parseInt(route.query.id as string) },
    api: row ? edit : add,
    getTable: proRef.value?.getTableList
  };

  apiRef.value?.acceptParams(params);
};

const deleteRow = async (ids: any) => {
  await useHandleData(deleteApi, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};
</script>
<style></style>
